import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import axios from "../../utils/request";
import { NavBar } from "antd-mobile";
import { InfiniteScroll } from 'antd-mobile'
import { Space, Switch } from 'antd-mobile'
import { useNavigate } from "react-router-dom";

function Chelist() {
  const { start, end, date } = useSelector((store) => store.city);
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);
  const navigate = useNavigate()

  // 是否有票、、是否高铁
  const [isSpeed,setIsSpeed] = useState(false)
  // const [isSeat,setIsSeat] = useState(false)
  const getdata = async () => {
    const res = await axios.post("/trip/train", { start, end, date,page,isSpeed });
    console.log(res);
    setList([...list,...res.data.data]);
    setPage(page+1)
  };

  useEffect(() => {
    getdata();
  }, []);

  // go详情
  const goxq = (v)=>{
    navigate('/xq',{state:v})
  }
  return (
    <div>
      <NavBar>车票列表</NavBar>
      <div>
        {list.map((v, i) => {
        return (
          <dl key={i} style={{width:"100%",height:"90px",borderBottom:"1px solid"}}
        onClick={()=>{
          goxq(v)
        }}
          >
            <dt>
              <div>{v.start} —— {v.end}</div>
              <div>{v.isSeat?"有票":"无票"}</div>
              <div>{v.isSpeed?"高铁":"非高铁"}</div>
            </dt>
            <dd style={{float:"left"}}>￥：<span style={{color:"red",fontWeight:"900"}}>{v.tick.vip}</span></dd>
          </dl>
          
        );
      })}
      </div>
      <InfiniteScroll loadMore={getdata} hasMore={true} />
      <div style={{position:"fixed",left:0,bottom:0}}>
        <Switch onChange={(val)=>{
          setIsSpeed(val)
          setList([])
          setPage(1)
        }}/>{isSpeed?"高铁":"非高铁"}
      </div>

      
    </div>

    
  );
}

export default Chelist;
